<template>
  <app-container>
    <app-block>
      <el-tabs v-model="form.tabType" @tab-click="tabChange" class="wp100 vm">
        <el-tab-pane
          :label="item.label"
          :name="item.value"
          v-for="(item, index) in CUSTOMERFOLLOW_TAB"
          :key="index"
        />
      </el-tabs>
      <zm-form :model="form" ref="searchForm" :rules="Rules" inline>
        <zm-form-item label prop="customerName">
          <zm-input
            class="w200"
            v-model="form.customerName"
            placeholder="输入客户名称"
          />
        </zm-form-item>
        <zm-form-item label prop="tradeType">
          <zm-data-select
            v-model="form.tradeType"
            api="getDictList"
            :params="{type:'tradeType'}"
            multiple
            str
            placeholder="客户行业"
            class="w200"
          ></zm-data-select>
        </zm-form-item>
        <zm-form-item label prop="customerType">
          <zm-data-select
            v-model="form.customerType"
            api="getDictList"
            :params="{type:'customerType'}"
            placeholder="客户类型"
            class="w200"
          ></zm-data-select>
        </zm-form-item>
        <zm-form-item label prop="customerStar">
          <zm-data-select
            v-model="form.customerStar"
            :list="CUSTOMER_STAR"
            label-name="label"
            placeholder="客户级别"
            class="w200"
          ></zm-data-select>
        </zm-form-item>
        <zm-form-item label prop="followAccountId" v-if="[2, 3].includes(+form.tabType)">
          <el-cascader
            placeholder="跟进人员"
            :props="props"
            v-model="form.followAccountId"
            :options="accountList"
            clearable
            class="w200"
          ></el-cascader>
        </zm-form-item>
        <zm-form-item>
          <zm-button @click="onSearch" t="search"></zm-button>
          <zm-button @click="onReset" t="reset"></zm-button>
        </zm-form-item>
      </zm-form>
    </app-block>
    <app-block>
      <div class="mb15">
        <zm-button @click="onAdd" t="add"></zm-button>
        <zm-button type="warning" @click="onGetFields">
          导出
        </zm-button>
        <zm-export
          ref="export"
          :api="exportApi()"
          type="warning"
          :params="exportForm"
          v-show="false"
        ></zm-export>
      </div>
      <zm-table-data
        :data="tableParams.data"
        ref="multipleTable"
        :columns="columns"
        :fetch="loadList"
        :table-params="tableParams"
        :mutilple="true"
        @selection-change="saveIds"
        config-header
        :store-key="SOTRE_KEY_CUSTOMER_FOLLOW_LIST"
      ></zm-table-data>
    </app-block>
    <new-panel
      :obj="newParams.obj"
      v-model="newParams.visible"
      v-if="newParams.visible"
      @after="loadList"
    ></new-panel>
    <detail-follow
      v-if="detailParams.visible"
      v-model="detailParams.visible"
      :obj="detailParams.obj"
      :tab-type="detailParams.tabType"
      @after="onSearch"
    ></detail-follow>
    <export-panel
      :api="exportField()"
      v-if="exportParams.visible"
      v-model="exportParams.visible"
      @after="onExport"
      type="1"
    ></export-panel>
  </app-container>
</template>

<script>
import tableMixin from '@/mixins/zmTableMixin'
import NewPanel from './components/New'
import DetailFollow from './components/Detail'
import { CUSTOMERFOLLOW_TAB, CUSTOMER_STAR } from '@/model/type'
import { columns } from './const'
import {getPageList, getExportField, exportFollow} from '@/api/src/follow'
import api from '@/api'
import ExportPanel from '@/components/exportFields'
import { SOTRE_KEY_CUSTOMER_FOLLOW_LIST } from '@/model/tableStoreKey'
import {getAccountList} from '@/api/src/public'

export default {
  name: 'FollowList',
  components: { NewPanel, DetailFollow, ExportPanel },
  mixins: [tableMixin],
  data () {
    return {
      CUSTOMERFOLLOW_TAB,
      CUSTOMER_STAR,
      SOTRE_KEY_CUSTOMER_FOLLOW_LIST,
      form: {
        tabType: '1',
        customerName: '',
        tradeType: '',
        customerType: '',
        customerStar: '',
        followAccountId: ''
      },
      selectedNos: '',
      newParams: {
        visible: false,
        obj: {}
      },
      transParams: {
        visible: false,
        pTitle: '',
        trans: false
      },
      detailParams: {
        visible: false,
        obj: {},
        tabType: '1'
      },
      exportForm: {},
      exportParams: { visible: false },
      Rules: {},

      accountList: [],
      props: {
        label: 'name',
        value: 'id',
        children: 'accountData'
      }
    }
  },
  computed: {
    columns () {
      return columns(this)
    }
  },
  watch: {},
  created () {
  },
  methods: {
    async init () {

    },
    async tabChange () {
      const _params = this.form.tabType === '2' ? { typeList: 'apartmentList' } : {}
      this.accountList = [2, 3].includes(+this.form.tabType) ? await getAccountList(_params) : []
      this.onReset()
    },
    exportApi () {
      return exportFollow
    },
    exportField () {
      return getExportField
    },
    async loadList () {
      this.initialTableData([], 0)
      const followAccountId = (this.form.followAccountId && this.form.followAccountId[1]) || ''
      const res = await getPageList(
        this.assignQuery({ ...this.form, ...{followAccountId: followAccountId} })
      )
      this.initialTableData(res.list, res.count)
    },
    saveIds (selection, row) {
      // 保存已选
      this.selectedNos = selection.map(item => item.id).join(',')
    },
    onAdd () {
      this.newParams = {
        visible: true,
        obj: {}
      }
    },
    onEdit (row) {
      this.newParams = {
        visible: true,
        obj: row
      }
    },
    onDetail (row) {
      this.detailParams = {
        visible: true,
        obj: row,
        tabType: this.form.tabType
      }
    },
    onDel (row) {
      this.$confirm('是否确认删除该跟进记录?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await api.follow.delete({ id: row.id })
          this.$message.success('删除成功')
          this.onSearch()
        })
        .catch(() => {})
    },
    onGetFields () {
      this.exportParams.visible = true
    },
    onExport (fields) {
      const followAccountId = (this.form.followAccountId && this.form.followAccountId[1]) || ''
      this.exportForm = {
        ...this.form,
        ...{ ids: this.selectedNos },
        ...{ fields: fields },
        ...{ followAccountId: followAccountId }
      }
      this.$refs.export.onExport()
    }
  }
}
</script>
